<style scoped lang="less">
.progress-ring-circle {
  width: 40vw;
  height: 40vw;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate3d(1, 0, 0, -66deg);
  margin: 120px;

  span {
    --bg: rgba(0, 0, 0, 0);
    --sg: transparent;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    // transform-origin: 0% 0%; /* 将旋转原点设置在左上角 */
  }

  span::after {
    content: "";
    width: 2.5vw; // 改变stripNumber时记得改
    height: 3vw;
    position: absolute;
    background-color: var(--bg);
    box-shadow: 0 0 0.5vw var(--sg), 0 0 1vw var(--sg), 0 0 2vw var(--sg);
    transition: 0.8s linear; /* 指定过渡属性 */
  }
}
</style>
<template>
  <div class="progress-ring">
    <div class="progress-ring-circle">
      <span
        v-for="(item, index) in stripNumber"
        :key="index"
        :style="{
          transform: `rotate(${(index / stripNumber) * 360 + 210}deg)`
        }"
      ></span>
    </div>
    <input type="text" v-model="value" />
    <button type="button" @click="chColor()">开始</button>
  </div>
</template>

<script>
export default {
  name: "ProgressRing",
  data() {
    return {
      items: ["item 1", "item 2", "item 3", "item 4", "item 5"], // 你可以根据需要修改这个数组
      value: 20,
      stripNumber: 25
    };
  },
  mounted() {},
  methods: {
    chColor() {
      const main = document.querySelector(".progress-ring-circle");
      console.log(main.children.length);
      // for (let i = 0; i < main.children.length; i++) {
      for (let i = main.children.length - 1; i >= 0; i--) {
        var number = this.stripNumber - this.value / (100 / this.stripNumber);
        if (i >= number) {
          main.children[i].style.setProperty(
            "--bg",
            // "red"
            `hsl(${(i / this.stripNumber) * 360}, 100%, 50%)`
          );
          main.children[i].style.setProperty(
            "--sg",
            `hsl(${(i / this.stripNumber) * 360}, 100%, 50%)`
          );
        } else {
          main.children[i].style.setProperty("--bg", "rgba(0, 0, 0, 0)");
          main.children[i].style.setProperty("--sg", "transparent");
        }
      }
    }
  }
};
</script>


